<template>
  <div
    class="btn_list_box"
    v-permission="config.permissionValue ? config.permissionValue : false"
  >
    <div
      v-if="isPermission"
      :class="config.btnClass"
      class="render-text-btn"
      @click="config.handleClick(data)"
    >
      <span>{{ config.setName ? config.setName(data) : config.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Btn",
  props: {
    config: {
      type: Object,
      equired: true,
      default: () => {},
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    isPermission() {
      // 当‘operatePermissionList’ 存在时需要判断
      // 不存在时返回true
      // 当 ‘config.permissionValue’ 不存在时 返回true
      // 都存在时，取值返回
      if (this.data.operatePermissionList) {
        let operatePermissionList = this.data.operatePermissionList;
        let obj = operatePermissionList.find(
          (e) => e.scope === this.config.permissionValue
        );
        return obj ? obj.operatePermission : true;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="less">
.btn_list_box {
  .render-text-btn {
    /* text-decoration: underline; */
    color: #165dff;
    cursor: pointer;
    font-size: 14px;
  }

  .no-handle {
    color: #333;
    cursor: default;
  }
}
</style>
